taro 小程序开发入门指北

入门学习资料
如何在 Taro 小程序集成代码规范
如何在老项目中集成
- taro 升级

入门学习资料

如何在 Taro 小程序集成代码规范

项目背景：当前 taro 版本 v3.4.12。基于 taro-cli 构建的项目有预留 eslint 的配置，但是官方并没有集成文档。本人也是刚开始接触 taro，因此记录一下在 taro 项目中集成代码规范的经历。

集成 eslint、tslint、prettier

1.使用 taro-cli 初始化一个全新的小程序项目。

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# 使用命令创建模板项目
$ taro init myApp

2.安装依赖

# 安装 typepscript-eslint 依赖
yarn add --dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
# 安装 prettier 依赖
yarn add --dev --exact prettier eslint-config-prettier eslint-plugin-prettier
# 创建 prettier 配置文件。配置内容参考 https://prettier.io/docs/en/configuration.html#basic-configuration
echo {}> .prettierrc.json

.prettierrc.json:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

3.更新 .eslintrc 文件

// ESLint 检查 .vue 文件需要单独配置编辑器：
// https://eslint.vuejs.org/user-guide/#editor-integrations
{
  "extends": [
    "taro/vue3", // 项目初始化时选择的框架类型
    "eslint:recommended", // 新增 eslint 推荐校验
    "plugin:@typescript-eslint/recommended", // 新增 typescript 推荐校验
    "prettier" // 新增 prettier 校验。比如引号，分号等配置
  ],
  "plugins": ["prettier"], // 使用 eslint-plugin-prettier 解决 eslint 和 prettier 的规则冲突
  "rules": {
    "prettier/prettier": "error" // 开启 prettier 规则校验
  },
  // 校验 .vue 文件
  "overrides": [
    {
      "files": ["*.vue"],
      "parser": "vue-eslint-parser",
      "parserOptions": {
        "extraFileExtensions": [".vue"],
        "parser": "@typescript-eslint/parser" // 支持 lang="ts"
      }
    }
  ],
  // 兼容 taro 的编译环境
  "env": {
    "node": true
  },
}

参考 elux-cli#eslint-plugin

4.更新 package.json 的 scripts:

{
  "scripts": {
    "eslint": "eslint --ext .js,.ts,.vue,.jsx,.tsx ."
  }
}

5.创建 .eslintignore 文件，忽略一些不需要检查的文件。

node_modules
dist

然后就可以修改文件，查看是否符合代码规范了。也可以运行 yarn lint 对整体项目的代码进行检查。

6.使用 TypeScript 的项目，如若配置完 ESLint，对于不规范的代码编译器没有正常给出提示。有可能是 ESLint 跳过了对 ts 文件的检查，可以对全局 settings.json 文件加上如下配置：

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  "typescriptreact"
]

此时，尝试编写一些不规范的代码，可以看到编译器是会正常给出提示信息的。

集成 stylelint

1.添加依赖

# 安装基础依赖
yarn add -D stylelint stylelint-config-standard

# 创建配置文件
touch .stylelintrc.json

# 配合 prettier 使用，关闭冲突的规则
yarn add -D stylelint-config-prettier

# lint .vue 文件
yarn add -D postcss-html stylelint-config-recommended-vue

2.更新 .stylelintrc.json:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-recommended-vue"
  ]
}

3.更新 scripts:

{
  "scripts": {
    "stylelint": "stylelint **/*.css **/*.vue"
  }
}

4.配置 vscode

安装 StyleLint 官方提供的 Stylelint.vscode-stylint 扩展
配置 stylelint.validate 使编辑器检查 .vue 文件，因为 stylelint 默认不检查 .vue 文件。

"stylelint.validate": [
    ...,
    // ↓ Add "vue" language.
    "vue"
]

至此，我们就可以在 .css, .vue 文件中检查样式了。

集成 commitlint

# install
yarn add -D @commitlint/config-conventional @commitlint/cli

# 创建配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

# Install Husky v6
yarn add husky --dev

# Activate hooks
yarn husky install

添加 hook：

cat <<EEE > .husky/commit-msg
#!/bin/sh
. "\$(dirname "\$0")/_/husky.sh"

npx --no -- commitlint --edit "\${1}"
EEE

使 hook 可执行：

chmod a+x .husky/commit-msg

配置 git-commit

安装依赖

npm install -g commitizen git-cz
commitizen init cz-conventional-changelog --yarn --dev --exact

更新 scripts:

{
  "scripts": {
    "commit": "git-cz"
  }
}

然后提交 git-commit 可以用以下方式以确保符合 Commitizen 规范

# 默认方式
git commit --message 'feat: add commitlint support'

# 使用 commit-script，进入提交信息交互，填入对应信息即可。
yarn commit

集成 git-hooks

上述的检查配置，除了手动运行命令之外，我们还需要将这些功能集成到 git-hooks 才能达到实际有效的效果。我们希望在 git-commit 的时候就对上述规范问题进行检查和修复，以达到符合代码规范的要求，因此还需要进一步的配置。

1.安装 husky

# 添加 prepare hook
npm set-script prepare "husky install"
npm run prepare

# 添加 pre-commit hook
npx husky add .husky/pre-commit "npx lint-staged"

2.安装 lint-staged

yarn add -D lint-staged

更新 package.json 配置：

{
  "lint-staged": {
    "**/*.{js,ts,vue,jsx,tsx}": [
      "prettier --write",
      "eslint --cache --fix",
      "git add"
    ],
    "**/*.{css,vue}": ["prettier --write", "stylelint --fix", "git add"]
  }
}

这样在提交 commit 时，会按照以下顺序执行:

pre-commit(git-hook)
npx lint-staged
  - prettier
  - eslint
  - stylelint
  - git add
commitlint

如果有错误，则根据提示信息进行修复，如果没有则完成提交。

上述命令仅针对 commit 时更新的文件，未修改的文件是不会执行的，因此对于老项目，我们可以渐进式进行代码规范，而不会担忧提交信息时会导致过多改动）

如何在老项目中集成

eslint 更新比较快，有些插件可能无法兼容，我们需要确保使用最新版的 eslint 及相关插件。因此方案如下：

升级 taro 到最新版本
参考上述步骤进行配置

taro 升级

参考 taro#将 Taro CLI 版本与项目中 Taro 相关依赖的版本保持一致

# 升级
taro update project

# 自动化检查项目配置和代码合法性
taro doctor

然后参考如何在新项目集成集成即可完成相关配置。

taro 小程序开发入门指北 #

入门学习资料 #

如何在 Taro 小程序集成代码规范 #

相关链接 #

集成 eslint、tslint、prettier #

集成 stylelint #

集成 commitlint #

配置 git-commit #

集成 git-hooks #

如何在老项目中集成 #

taro 升级 #